{% extends "layui/admin/base.html" %}
{% block title %}导航网站 - 仪表盘{% endblock %}

{% block content %}
<blockquote class="layui-elem-quote">
    <a href="/admin/v2"><i class="layui-icon layui-icon-home"></i> 首页</a>
</blockquote>
<div class="layui-panel">
    <div class="layui-card">
        <div class="layui-card-header">
            <h1>导航数据</h1>
        </div>
        <div class="layui-card-body">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md3">
                    <div class="dashboard-card dashboard-card-pink">
                        <div class="dashboard-card-header">
                            <span>网站数量</span>
                            <i class="layui-icon layui-icon-list"></i>
                        </div>
                        <div class="dashboard-card-body">
                            <div class="dashboard-card-count" id="website-count">
                                <i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate"></i> 加载中...
                            </div>
                        </div>
                        <div class="dashboard-card-footer">
                            <a href="#">查看所有网站</a>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <div class="dashboard-card dashboard-card-blue">
                        <div class="dashboard-card-header">
                            <span>分类数量</span>
                            <i class="layui-icon layui-icon-list"></i>
                        </div>
                        <div class="dashboard-card-body">
                            <div class="dashboard-card-count" id="category-count">
                                <i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate"></i> 加载中...
                            </div>
                        </div>
                        <div class="dashboard-card-footer">
                            <a href="#">查看所有分类</a>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <div class="dashboard-card dashboard-card-green">
                        <div class="dashboard-card-header">
                            <span>建议数量</span>
                            <i class="layui-icon layui-icon-list"></i>
                        </div>
                        <div class="dashboard-card-body">
                            <div class="dashboard-card-count" id="suggestion-count">
                                <i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate"></i> 加载中...
                            </div>
                        </div>
                        <div class="dashboard-card-footer">
                            <a href="#">查看所有建议</a>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <div class="dashboard-card dashboard-card-yellow">
                        <div class="dashboard-card-header">
                            <span>网站寄语</span>
                            <i class="layui-icon layui-icon-list"></i>
                        </div>
                        <div class="dashboard-card-body">
                            <div class="dashboard-card-quote" id="hitokoto-content">加载中...</div>
                        </div>
                        <div class="dashboard-card-footer">
                            <a href="https://hitokoto.cn/" target="_blank" rel="noopener noreferrer">来源：一言</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-card">
        <div class="layui-card-header">
            <h1>最近建议</h1>
        </div>
        <div class="layui-card-body">
            <table class="layui-table" id="suggestion-table" lay-filter="suggestion-table"></table>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    layui.use(['jquery', 'table', 'layer'], function () {
        const $ = layui.jquery;
        const table = layui.table;
        const layer = layui.layer;

        // 初始化表格
        table.render({
            elem: '#suggestion-table',
            url: '/api/suggestions/',
            method: 'get',
            headers: {
                'Authorization': 'Bearer ' + localStorage.getItem('token')
            },
            page: true,
            parseData: function (res) {
                return {
                    code: res.code,
                    msg: res.msg,
                    count: res.count,
                    data: res.data
                }
            },
            cols: [[
                {field: 'id', title: 'ID', width: 60, sort: true},
                {field: 'site_name', title: '推荐网站', width: 200},
                {field: 'site_url', title: '网址', width: 200},
                {field: 'site_description', title: '推荐语', width: 200},
                {field: 'email', title: '邮箱', width: 200},
                {field: 'ip', title: 'IP 地址', width: 150},
                {field: 'created_at', title: '时间', width: 200},
                {
                    field: 'handled',
                    title: '状态',
                    width: 120,
                    templet: d => d.handled
                        ? '<span class="layui-badge layui-bg-green">已处理</span>'
                        : '<span class="layui-badge layui-bg-red">未处理</span>'
                }
            ]]
        });

        // 加载数据
        function loadData() {
            $('.dashboard-card-count').html('<i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate"></i> 加载中...');
            $.ajax({
                url: '/api/dashboard',
                type: 'GET',
                dataType: 'json',
                headers: {
                    'Authorization': 'Bearer ' + localStorage.getItem('token')
                },
                success: function (res) {
                    if (res.code === 0) {
                        $('#website-count').text(res.data.website_count);
                        $('#category-count').text(res.data.category_count);
                        $('#suggestion-count').text(res.data.suggestion_count);
                    } else {
                        layer.msg(res.msg || '数据加载失败', {icon: 2});
                        $('.dashboard-card-count').text('加载失败');
                    }
                },
                error: function (xhr, status, error) {
                    layer.msg('请求失败: ' + error, {icon: 2});
                    $('.dashboard-card-count').text('加载失败');
                }
            });
        }

        // 加载一言寄语
        function loadHitokoto() {
            $.ajax({
                url: 'https://v1.hitokoto.cn/',
                method: 'GET',
                success: function (res) {
                    $('#hitokoto-content').text(res.hitokoto || '暂无内容');
                },
                error: function () {
                    $('#hitokoto-content').text('加载失败');
                }
            });
        }

        // 初始化
        loadData();
        loadHitokoto();

        // 表格工具条事件
        table.on('tool(suggestion-table)', function (obj) {
            const data = obj.data;
            if (obj.event === 'handle') {
                window.location.href = '/admin/handle_suggestion/' + data.id;
            }
        });

        // 可选：定时刷新寄语
        // setInterval(loadHitokoto, 60000);
    });
</script>

<!-- 表格操作列模板 -->
<script type="text/html" id="table-toolbar">
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="handle">处理</a>
</script>

<style>
    .dashboard-card {
        border-radius: 8px;
        overflow: hidden;
        color: #fff;
        text-align: center;
        padding: 20px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .dashboard-card-pink {
        background: linear-gradient(to right, #ff9a9e, #fad0c4);
    }

    .dashboard-card-blue {
        background: linear-gradient(to right, #3f5efb, #fc466b);
    }

    .dashboard-card-green {
        background: linear-gradient(to right, #00b09b, #96c93d);
    }

    .dashboard-card-yellow {
        background: linear-gradient(to right, #ffcc00, #ffdd57);
    }

    .dashboard-card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }

    .dashboard-card-header span {
        font-size: 16px;
        font-weight: bold;
    }

    .dashboard-card-count {
        font-size: 28px;
        font-weight: bold;
        margin-bottom: 10px;
    }

    .dashboard-card-footer a {
        color: #fff;
        text-decoration: none;
    }

    .dashboard-card-quote {
        font-size: 20px;
        font-style: italic;
    }

    .layui-card-header h1 {
        font-size: 22px;
        font-weight: 500;
    }

    .layui-anim-rotate {
        display: inline-block;
        margin-right: 5px;
    }
</style>
{% endblock %}
